<template>
	<view>
		<view class="wu">
		</view>
		<view class="form re">
			<view class="username">
				<input placeholder="请输入视频标题" v-model="video.videoIntroduce"
					placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<view class="code">
				<input placeholder="请输入视频关键词" v-model="video.videoKeyword"
					placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<view class="password">
				<view class="uni-form-item uni-column">
					<picker @change="bindPickerChange" :range="videoType" :range-key="'dictName'">
						<label style="color: rgba(255,255,255,0.8);font-size: 35upx;">视频类型：</label>
						<label style="color: rgba(255,255,255,0.8);font-size: 35upx;">{{videoTypeArraylabel}}</label>
					</picker>
				</view>
			</view>
			<view class="code">
				<input placeholder="点击右侧按钮上传视频" v-model="video.videoAddress"
					placeholder-style="color: rgba(255,255,255,0.8);" id="video" />
				<view class="video" :style="{'color':getVideoBtnColor}" @click="chooseVideo()">{{getVideoText}}</view>
			</view>
			<view class="code">
				<input placeholder="点击右侧按钮选择关联商品" v-model="goods.goodsName"
					placeholder-style="color: rgba(255,255,255,0.8);" />
				<view class="video" :style="{'color':getVideoBtnColor}" @click="tochooseGoods()">选择商品</view>
			</view>
			<view class="btn" @tap="doReg">确认上传</view>
		</view>
	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	export default {
		data() {
			return {
				videos: [
					''
				],
				getVideoText: '选择视频',
				getVideoBtnColor: "#ffffff",
				index: 0,
				videoTypeArraylabel: '---请选择---',
				videoType: [],
				video: {
					videoIntroduce: "",
					videoKeyword: '',
					videoAddress: "",
					videoTypeId: "",
					goodsId: 1
				},
				dict: {
					typeId: 3,
					sysDictTypeValue: 'VEDIO_TYPE'
				},
				goods: {

				}
			}
		},
		onLoad() {
			this.getVideoType();
			this.isLogin();
		},
		onShow(options) {
			uni.getStorage({
				key: 'goodsForVideo',
				success: (res) =>{
					this.goods = res.data
					this.video.goodsId = this.goods.goodsId
					uni.removeStorage({
					key:'goodsForVideo'
					})
				}
			})
		},
		methods: {
			tochooseGoods(){
					uni.navigateTo({
						url:'./chooseGoods'
					})
			},
			isLogin() {
				try {
					let token = uni.getStorageSync('token');
					if (token = '') {
						this.$utils.switchTab('tabBar/user/user');
					}
				} catch (e) {
					this.$utils.msg("连接网络错误，请检查网络是否连接！");
				}
			},
			bindPickerChange(e) {
				this.index = e.target.value
				this.videoTypeArraylabel = this.videoType[this.index].dictName
				this.video.videoTypeId = this.videoType[this.index].dictId
			},
			getVideoType() {
				this.$req.getDictValue(this.dict).then(res => {
					this.videoType = res;
				})
			},
			doReg() {
				uni.hideKeyboard()
				if (this.video.videoIntroduce == "") {
					this.$utils.msg("请先填写视频标题！");
					return false;
				}
				if (this.video.videoKeyword == "") {
					this.$utils.msg("请先填写视频关键词！");
					return false;
				}
				if (this.video.videoTypeId == '') {
					this.$utils.msg("请先选择视频类型！");
					return false;
				}
				if (this.video.videoAddress == "") {
					this.$utils.msg("请先选择所需上传的视频！");
					return false;
				}
				if (this.video.goodsId == -1) {
					this.$utils.msg("请先选择视频所关联的商品！");
					return false;
				}
				uni.showLoading({
					title: '上传中...'
				})
				setTimeout(() => {
					uni.hideLoading();
				}, 500)
				this.$req.uploadVideo(this.video).then(res => {
					if (res === true) {
						this.$utils.msg('上传成功')
						setTimeout(() => {
							uni.navigateBack({})
						}, 1000)
					}
				})
			},
			// 上传视频
			chooseVideo() {
				uni.chooseVideo({
					success: res => {
						this.videos[0] = res.tempFilePath;
						uni.showLoading({
							title: '上传中...'
						})
						this.$utils.qiniuyunUpload(this.videos).then(res => {
							uni.hideLoading();
							this.video.videoAddress = 'http://file.loveliuran.cn/' + res;
							uni.showToast({
								title: '上传完毕'
							});
						});

					}
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "../../../static/css/login.scss";

	.wu {
		margin-bottom: 50upx;
	}

	.form {
		.res {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100upx;
			color: rgba($color: #ffffff, $alpha: 0.8);
		}
	}

	.video {
		position: absolute;
		right: 50upx;
		height: 90upx;
		width: 150upx;
		line-height: 100upx;
		text-align: center;
		font-size: 16upx;
		border-top-right-radius: 50upx;
		border-bottom-right-radius: 50upx;
		background-color: #F27B88;
	}

	#video {
		width: 450upx;
	}
</style>
